<script lang="ts">
  import { HeaderType } from "./type";
  import { time, formatDate } from "./store";

  export let type: HeaderType = HeaderType.home;

  function reload() {
    location.reload();
  }

  function back() {
    window.history.back();
    window.location.href = `/index`;
  }
</script>

<div class="w-full relative mt-4 header-bg header-bg-{type}">
  <div
    class="absolute top-0 left-0 flex gap-2 opacity-0 hover:opacity-30 mt--1"
  >
    <!-- svelte-ignore a11y-click-events-have-key-events -->
    <div class="icon h-8 w-8" on:click={reload}>
      <svg
        width="100%"
        height="100%"
        viewBox="0 0 200 200"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M167.129 106.699C163.887 106.699 161.269 104.063 161.269 100.82C161.289 86.6016 156.367 72.7149 147.402 61.6797L147.207 61.4258C141.055 53.9063 133.125 47.9102 124.297 44.0626L124.18 44.0235L123.75 43.8282C122.422 43.2618 120.957 42.7344 119.277 42.1876L119.16 42.1485L117.891 41.6993C116.504 41.2891 115.019 40.9376 113.867 40.6641C113.633 40.6055 113.418 40.5665 113.184 40.5079C112.773 40.4102 112.402 40.3126 112.09 40.254L112.012 40.2344C110.684 39.961 109.258 39.7461 107.773 39.5899L107.617 39.5704L105.977 39.336C91.582 37.9493 77.1875 41.7969 65.3906 50.1954C62.7539 52.0704 59.1015 51.4649 57.2265 48.8282C55.3515 46.1915 55.957 42.5391 58.5937 40.6641C72.7148 30.6055 90 25.9961 107.246 27.6954L107.5 27.7344L109.199 27.9688C110.957 28.1641 112.676 28.4376 114.277 28.7501C114.883 28.8672 115.449 29.004 115.957 29.1211C116.152 29.1602 116.328 29.2188 116.523 29.2579C117.891 29.5704 119.687 30.0001 121.445 30.5274L121.68 30.6055L123.027 31.0743C125.019 31.7383 126.797 32.3829 128.437 33.086L128.594 33.1641L129.062 33.379C139.629 37.9883 149.062 45.1758 156.387 54.1407L156.582 54.4141C167.207 67.5196 173.027 84.004 173.008 100.879C172.988 104.082 170.352 106.699 167.129 106.699Z"
          fill="#fff"
        />
        <path
          d="M170.41 129.219L185.82 106.855C187.578 104.297 185.762 100.82 182.637 100.82H151.836C148.731 100.82 146.895 104.297 148.652 106.855L164.063 129.219C165.606 131.445 168.887 131.445 170.41 129.219ZM100.254 172.676C97.9102 172.676 95.5665 172.559 93.2227 172.324L92.9688 172.285L91.2891 172.051C89.5313 171.855 87.8125 171.582 86.211 171.27C85.6055 171.152 85.0391 171.016 84.5313 170.898C84.336 170.859 84.1602 170.801 83.9649 170.762C82.5977 170.449 80.8008 170.02 79.043 169.492L78.8086 169.414L77.461 168.945C75.4688 168.281 73.6915 167.637 72.0508 166.934L71.8946 166.855L71.4258 166.641C60.8594 162.031 51.4258 154.844 44.1016 145.879L43.9063 145.605C33.2813 132.5 27.461 116.016 27.4805 99.1406C27.4805 95.8984 30.1172 93.3008 33.3399 93.3008H33.3594C36.6016 93.3008 39.2188 95.9375 39.1993 99.1797C39.1797 113.398 44.1016 127.285 53.0665 138.32L53.2618 138.574C59.4141 146.094 67.3438 152.09 76.1719 155.938L76.7188 156.191C78.0469 156.758 79.5118 157.285 81.1915 157.832L81.3086 157.871L82.5782 158.32C83.9649 158.73 85.4493 159.082 86.6016 159.355C86.836 159.414 87.0508 159.453 87.2852 159.512C87.6954 159.609 88.0665 159.707 88.379 159.766L88.4571 159.785C89.7852 160.039 91.211 160.273 92.6954 160.43L92.8516 160.449L94.4922 160.684C108.887 162.07 123.281 158.223 135.078 149.824C137.715 147.949 141.367 148.555 143.242 151.191C145.117 153.828 144.512 157.48 141.875 159.355C129.668 168.047 115.117 172.676 100.254 172.676Z"
          fill="#fff"
        />
        <path
          d="M30.039 70.7812L14.6289 93.1445C12.8711 95.7031 14.6875 99.1797 17.8125 99.1797H48.6328C51.7383 99.1797 53.5742 95.7031 51.8164 93.1445L36.4062 70.7812C34.8633 68.5547 31.582 68.5547 30.039 70.7812Z"
          fill="#fff"
        />
      </svg>
    </div>
    {#if type !== HeaderType.home}
      <!-- svelte-ignore a11y-click-events-have-key-events -->
      <div class="icon h-8 w-8" on:click={back}>
        <svg
          width="100%"
          height="100%"
          viewBox="0 0 200 200"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M130.24 67.5199H38.9199C44.7599 61.5999 50.7599 55.3999 55.0799 50.8799C57.6399 48.1999 59.5999 46.1599 60.5999 45.1599C61.0464 44.7134 61.4006 44.1833 61.6422 43.5999C61.8839 43.0166 62.0082 42.3913 62.0082 41.7599C62.0082 41.1284 61.8839 40.5032 61.6422 39.9198C61.4006 39.3364 61.0464 38.8064 60.5999 38.3599C60.1534 37.9134 59.6233 37.5592 59.04 37.3175C58.4566 37.0759 57.8313 36.9515 57.1999 36.9515C56.5685 36.9515 55.9432 37.0759 55.3598 37.3175C54.7765 37.5592 54.2464 37.9134 53.7999 38.3599C52.7999 39.3599 50.7599 41.4799 48.1599 44.1999C43.3199 49.2399 36.3999 56.4799 29.9199 62.9199C28.6742 64.1643 27.6859 65.6421 27.0117 67.2688C26.3374 68.8954 25.9904 70.639 25.9904 72.3999C25.9904 74.1607 26.3374 75.9043 27.0117 77.5309C27.6859 79.1576 28.6742 80.6354 29.9199 81.8799C32.6799 84.6399 38.3599 90.1999 44.0399 95.7599C49.7199 101.32 55.3599 106.84 58.1199 109.6C59.0226 110.5 60.2453 111.005 61.5199 111.005C62.7945 111.005 64.0172 110.5 64.9199 109.6C66.7999 107.72 66.7999 104.68 64.9199 102.8C62.1599 100.04 56.4799 94.4799 50.7999 88.9199C46.2799 84.4799 41.7999 80.0799 38.7599 77.1199H130.28C151.32 77.1199 168.44 94.2399 168.44 115.28C168.44 136.32 151.32 153.44 130.28 153.44H44.3199C41.6799 153.44 39.5199 155.6 39.5199 158.24C39.5199 160.88 41.6799 163.04 44.3199 163.04H130.24C156.56 163.04 178 141.6 178 115.28C178 88.9599 156.6 67.5199 130.24 67.5199H130.24Z"
            fill="#fff"
          />
        </svg>
      </div>
    {/if}
  </div>
  <div class="absolute top-0 right-4 text-white mt--1">
    {formatDate($time)}
  </div>
</div>

<style>
  .header-bg {
    aspect-ratio: 1911/89;
    @apply bg-center bg-no-repeat bg-contain;
  }

  .header-bg-0 {
    background-image: url("./header.png");
  }

  .header-bg-4 {
    background-image: url("./mechanical.png");
  }

  .header-bg-1 {
    background-image: url("./internet.png");
  }

  .header-bg-3 {
    background-image: url("./factory.png");
  }

  .header-bg-2 {
    background-image: url("./electronic.png");
  }

  .mt--1 {
    margin-top: -0.5rem;
  }
</style>
